// 内容脚本 - 用于识别登录表单并提供填充功能

// 样式注入
function injectStyles() {
  const styleElement = document.createElement('style');
  styleElement.textContent = `
    .pwd-manager-icon {
      position: absolute;
      width: 26px;
      height: 26px;
      background-color: #3F51B5;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 9999;
      font-size: 14px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      transition: transform 0.2s, box-shadow 0.2s;
      animation: pwdManagerPulse 2s infinite;
    }
    
    @keyframes pwdManagerPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    
    .pwd-manager-popup {
      position: absolute;
      width: 300px;
      background-color: white;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      border-radius: 4px;
      z-index: 10000;
      padding: 10px;
      font-family: Arial, sans-serif;
      max-height: 400px;
      overflow-y: auto;
    }
    
    .pwd-manager-popup h2 {
      margin: 0 0 10px;
      font-size: 16px;
      color: #333;
      padding-bottom: 8px;
      border-bottom: 1px solid #eee;
    }
    
    .pwd-manager-search {
      width: 100%;
      padding: 6px;
      margin-bottom: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    
    .pwd-manager-region {
      margin-bottom: 8px;
    }
    
    .pwd-manager-region-header {
      font-weight: bold;
      padding: 6px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }
    
    .pwd-manager-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px;
      border-bottom: 1px solid #eee;
    }
    
    .pwd-manager-item:last-child {
      border-bottom: none;
    }
    
    .pwd-manager-fill-btn {
      background-color: #3F51B5;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 4px 8px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .pwd-manager-fill-btn:hover {
      background-color: #303f9f;
    }
  `;
  document.head.appendChild(styleElement);
}

// 识别登录表单
function detectLoginForms() {
  // logDebug('开始检测登录表单');
  
  // 查找所有输入框
  const allInputs = Array.from(document.querySelectorAll('input'));
  
  // 查找密码输入框
  const passwordInputs = allInputs.filter(input => 
    input.type === 'password' || 
    input.name?.toLowerCase().includes('pass') || 
    input.id?.toLowerCase().includes('pass')
  );
  
  // logDebug(`找到 ${passwordInputs.length} 个可能的密码输入框`);
  
  // 如果没有密码框，直接返回
  if (passwordInputs.length === 0) return;
  
  // 对每个密码输入框，尝试找到对应的用户名输入框
  passwordInputs.forEach((passwordInput, index) => {
    logDebug(`处理第 ${index + 1} 个密码框: ${passwordInput.name || passwordInput.id || '未命名'}`);
    
    // 当前元素已经有图标关联，跳过
    if (passwordInput.dataset.pwdManagerProcessed === 'true') {
      logDebug('此密码框已处理，跳过');
      return;
    }
    
    // 标记为已处理
    passwordInput.dataset.pwdManagerProcessed = 'true';
    
    // 尝试找最近的用户名输入框
    let userInput = null;
    
    // 1. 尝试在同一表单中寻找
    if (passwordInput.form) {
      const formInputs = Array.from(passwordInput.form.querySelectorAll('input')).filter(input => 
        input !== passwordInput && 
        (input.type === 'text' || input.type === 'email' || !input.type || input.type === '')
      );
      
      // 更可能是用户名的输入框排在前面
      userInput = formInputs.find(input => 
        input.name?.toLowerCase().includes('user') || 
        input.name?.toLowerCase().includes('email') || 
        input.name?.toLowerCase().includes('login') ||
        input.id?.toLowerCase().includes('user') || 
        input.id?.toLowerCase().includes('email') || 
        input.id?.toLowerCase().includes('login')
      );
      
      // 如果没找到明确的用户名框，就用第一个文本输入框
      if (!userInput && formInputs.length > 0) {
        userInput = formInputs[0];
      }
      
      logDebug(`表单中${userInput ? '找到' : '未找到'}用户名输入框`);
    }
    
    // 2. 尝试在相邻元素中寻找
    if (!userInput) {
      // 查找可能是用户名的输入框
      const possibleUserInputs = allInputs.filter(input => 
        input !== passwordInput && 
        (input.type === 'text' || input.type === 'email' || !input.type || input.type === '') &&
        !input.name?.toLowerCase().includes('search') && // 排除搜索框
        !input.id?.toLowerCase().includes('search')
      );
      
      // 密码框的前一个输入字段很可能是用户名
      const passwordIndex = allInputs.indexOf(passwordInput);
      if (passwordIndex > 0) {
        const prevInput = allInputs[passwordIndex - 1];
        if (possibleUserInputs.includes(prevInput)) {
          userInput = prevInput;
          logDebug('使用密码框前一个输入字段作为用户名');
        }
      }
      
      // 如果还没找到，检查周围的DOM结构
      if (!userInput) {
        let parent = passwordInput.parentElement;
        // 向上查找5层父元素
        for (let i = 0; i < 5 && parent && !userInput; i++) {
          const nearbyInputs = Array.from(parent.querySelectorAll('input')).filter(input => 
            possibleUserInputs.includes(input) && input !== passwordInput
          );
          
          if (nearbyInputs.length > 0) {
            // 优先选择标记为email/username的输入框
            userInput = nearbyInputs.find(input => 
              input.type === 'email' || 
              input.name?.toLowerCase().includes('user') || 
              input.name?.toLowerCase().includes('email') ||
              input.id?.toLowerCase().includes('user') || 
              input.id?.toLowerCase().includes('email')
            ) || nearbyInputs[0];
            
            logDebug(`在父元素层级${i+1}找到用户名输入框`);
            break;
          }
          parent = parent.parentElement;
        }
      }
    }
    
    // 如果找到用户名和密码输入框的组合，添加图标
    if (userInput) {
      logDebug('找到用户名和密码组合，添加图标');
      addManagerIcon(userInput, passwordInput);
    } else {
      // 如果只找到密码框，也添加图标
      logDebug('仅找到密码框，使用它添加图标');
      addManagerIcon(passwordInput, passwordInput);
    }
  });
}

// 添加管理器图标
function addManagerIcon(userInput, passwordInput) {
  // 避免重复添加图标
  const existingIcon = document.querySelector(`.pwd-manager-icon[data-input-id="${userInput.id || '_noId'}"]`);
  if (existingIcon) {
    logDebug('该输入框已有图标，跳过');
    return;
  }
  
  // 计算图标位置
  const rect = userInput.getBoundingClientRect();
  if (!rect.width && !rect.height) {
    // 元素不可见，不添加图标
    logDebug('输入框不可见，不添加图标');
    return;
  }
  
  const top = window.scrollY + rect.top + (rect.height / 2) - 10;
  const left = window.scrollX + rect.left - 30; // 放置在更明显的位置
  
  logDebug(`添加图标在位置 (${left}, ${top})`);
  
  // 创建图标元素
  const icon = document.createElement('div');
  icon.className = 'pwd-manager-icon';
  // 使用彩色图标以增加可见性
  icon.innerHTML = '<span style="font-size: 16px;">🔑</span>';
  icon.style.top = `${top}px`;
  icon.style.left = `${left}px`;
  // 增加透明度，使其更显眼
  icon.style.opacity = '0.9';
  icon.style.zIndex = '99999';
  // 保存输入框的标识信息
  icon.dataset.inputId = userInput.id || '_noId';
  
  // 点击图标时显示账号选择器
  icon.addEventListener('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    // 从chrome.storage获取凭据
    chrome.storage.sync.get(['credentials'], function(result) {
      if (result.credentials && result.credentials.length > 0) {
        showCredentialSelector(userInput, passwordInput, icon, result.credentials);
      } else {
        alert('没有保存的凭据，请先在扩展中添加');
      }
    });
  });
  
  // 将图标添加到页面
  document.body.appendChild(icon);
  
  // 设置位置更新器，跟随输入框滚动
  setupPositionUpdater(userInput, icon);
}

// 设置位置更新器
function setupPositionUpdater(input, icon) {
  // 监听滚动和调整大小事件，更新图标位置
  const updatePosition = () => {
    const rect = input.getBoundingClientRect();
    // 检查元素是否可见
    if (rect.width && rect.height) {
      icon.style.top = `${window.scrollY + rect.top + (rect.height / 2) - 10}px`;
      icon.style.left = `${window.scrollX + rect.left - 30}px`;
      
      // 显示图标
      icon.style.display = 'flex';
    } else {
      // 隐藏图标
      icon.style.display = 'none';
    }
  };
  
  // 添加事件监听
  window.addEventListener('scroll', updatePosition);
  window.addEventListener('resize', updatePosition);
  
  // 每隔一段时间检查一次
  setInterval(updatePosition, 2000);
}

// 显示账号选择器
function showCredentialSelector(userInput, passwordInput, icon, credentials) {
  // 移除已有的弹窗
  removePopup();
  
  // 创建弹窗容器
  const popup = document.createElement('div');
  popup.className = 'pwd-manager-popup';
  popup.id = 'pwd-manager-popup';
  
  // 计算弹窗位置
  const iconRect = icon.getBoundingClientRect();
  popup.style.top = `${window.scrollY + iconRect.bottom + 5}px`;
  popup.style.left = `${window.scrollX + iconRect.left - 40}px`;
  
  // 添加标题
  popup.innerHTML = '<h2>选择账号</h2>';
  
  // 添加搜索框
  const searchInput = document.createElement('input');
  searchInput.type = 'text';
  searchInput.className = 'pwd-manager-search';
  searchInput.placeholder = '搜索账号...';
  popup.appendChild(searchInput);
  
  // 按地区分组凭据
  const regionGroups = {};
  credentials.forEach(credential => {
    if (!regionGroups[credential.region]) {
      regionGroups[credential.region] = [];
    }
    regionGroups[credential.region].push(credential);
  });
  
  // 添加地区分组
  for (const region in regionGroups) {
    const regionDiv = document.createElement('div');
    regionDiv.className = 'pwd-manager-region';
    
    const regionHeader = document.createElement('div');
    regionHeader.className = 'pwd-manager-region-header';
    regionHeader.textContent = region;
    regionDiv.appendChild(regionHeader);
    
    // 添加该地区的凭据
    regionGroups[region].forEach(credential => {
      const item = document.createElement('div');
      item.className = 'pwd-manager-item';
      
      // 用户名显示
      const username = document.createElement('span');
      username.textContent = credential.username;
      
      // 填充按钮
      const fillBtn = document.createElement('button');
      fillBtn.className = 'pwd-manager-fill-btn';
      fillBtn.textContent = '填充';
      fillBtn.addEventListener('click', () => {
        fillCredentials(userInput, passwordInput, credential.username, credential.password);
        removePopup();
      });
      
      item.appendChild(username);
      item.appendChild(fillBtn);
      regionDiv.appendChild(item);
    });
    
    popup.appendChild(regionDiv);
  }
  
  // 搜索功能
  searchInput.addEventListener('input', function() {
    const query = this.value.toLowerCase();
    const itemElements = popup.querySelectorAll('.pwd-manager-item');
    
    itemElements.forEach(item => {
      const username = item.querySelector('span').textContent.toLowerCase();
      const regionHeader = item.closest('.pwd-manager-region').querySelector('.pwd-manager-region-header');
      const region = regionHeader.textContent.toLowerCase();
      
      if (username.includes(query) || region.includes(query)) {
        item.style.display = 'flex';
        item.closest('.pwd-manager-region').style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
    
    // 隐藏空地区
    document.querySelectorAll('.pwd-manager-region').forEach(region => {
      const hasVisibleItems = Array.from(region.querySelectorAll('.pwd-manager-item')).some(item => 
        item.style.display !== 'none'
      );
      
      if (!hasVisibleItems) {
        region.style.display = 'none';
      }
    });
  });
  
  // 添加到页面
  document.body.appendChild(popup);
  
  // 点击外部区域关闭弹窗
  document.addEventListener('click', documentClickHandler);
}

// 填充凭据
function fillCredentials(userInput, passwordInput, username, password) {
  userInput.value = username;
  passwordInput.value = password;
  
  // 触发输入事件，以便网站的JS可以检测到变更
  triggerInputEvent(userInput);
  triggerInputEvent(passwordInput);
}

// 移除弹窗
function removePopup() {
  const existingPopup = document.getElementById('pwd-manager-popup');
  if (existingPopup) {
    existingPopup.parentNode.removeChild(existingPopup);
    document.removeEventListener('click', documentClickHandler);
  }
}

// 文档点击处理器（用于关闭弹窗）
function documentClickHandler(e) {
  const popup = document.getElementById('pwd-manager-popup');
  if (popup && !popup.contains(e.target) && !e.target.classList.contains('pwd-manager-icon')) {
    removePopup();
  }
}

// 调试日志
function logDebug(message) {
  if (true) { // 开启调试日志
    // console.log(`[密码管理器] ${message}`);
  }
}

// 初始化
function initialize() {
  logDebug('初始化内容脚本');
  
  // 注入样式
  injectStyles();
  
  // 立即运行一次表单检测
  detectLoginForms();
  
  // 设置MutationObserver以检测DOM变化
  setupObserver();
  
  // 定期检查，因为某些网站使用不触发MutationObserver的动态加载方式
  setInterval(() => {
    detectLoginForms();
  }, 5000);
}

// 设置MutationObserver
function setupObserver() {
  logDebug('设置MutationObserver');
  
  // 观察整个文档树的变化
  const observer = new MutationObserver((mutations) => {
    let shouldDetect = false;
    
    // 检查是否有相关变化
    mutations.forEach(mutation => {
      // 如果添加了新节点
      if (mutation.addedNodes.length > 0) {
        for (const node of mutation.addedNodes) {
          if (node.nodeType === Node.ELEMENT_NODE) {
            // 如果添加了input元素或者可能包含input的元素
            if (node.tagName === 'INPUT' || 
                node.tagName === 'FORM' ||
                node.querySelector('input')) {
              shouldDetect = true;
              break;
            }
          }
        }
      }
      
      // 如果现有节点的属性变化了（可能是显示/隐藏）
      if (!shouldDetect && 
          mutation.type === 'attributes' && 
          (mutation.target.tagName === 'INPUT' || mutation.target.tagName === 'FORM')) {
        shouldDetect = true;
      }
    });
    
    // 如果检测到相关变化，运行表单检测
    if (shouldDetect) {
      logDebug('检测到DOM变化，重新扫描表单');
      detectLoginForms();
    }
  });
  
  // 配置观察选项
  const config = { childList: true, subtree: true, attributes: true };
  
  // 开始观察
  observer.observe(document.body, config);
}

// 触发输入事件
function triggerInputEvent(element) {
  const event = new Event('input', { bubbles: true });
  element.dispatchEvent(event);
  
  const changeEvent = new Event('change', { bubbles: true });
  element.dispatchEvent(changeEvent);
}

// 当文档加载完毕时初始化
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initialize);
} else {
  initialize();
} 